<template>
    <div class="b-title b-form">
        <i-form>
            <i-form-item label="标题名：">
                <i-input v-model="title"></i-input>
            </i-form-item>
            <i-form-item label="模板：">
                <i-radio-group v-model="styleValue">
                    <i-radio
                        v-for="(item, index) in data.showStyle"
                        :key="index"
                        :label="item">
                    </i-radio>
                </i-radio-group>
            </i-form-item>
            <section v-show="styleValue === '微信' && styleValue !== '精简'">
                <i-form-item label="日期：">
                    <i-date-picker
                        v-model="dateTime"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期和时间"
                        style="width: 100%">
                    </i-date-picker>
                </i-form-item>
                <i-form-item label="作者：">
                    <i-input v-model="author"></i-input>
                </i-form-item>
            </section>
            <section v-show="styleValue === '传统'">
                <i-form-item label="副标题：">
                    <i-input v-model="fitTitle" style="width: 84%" v-if="!bDate"></i-input>
                     <i-date-picker
                        v-model="dateTime"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期和时间"
                        v-else
                        style="width: 84%">
                    </i-date-picker>
                    <a
                        href="javascript:;"
                        style="margin-left: 6px;"
                        @click="tabFitTitle">
                        {{ bDate ? '文本' : '日期' }}
                    </a>
                </i-form-item>
            <i-form-item label="显示：">
                <i-radio-group v-model="positionValue">
                    <i-radio
                        v-for="(item, index) in data.showPosition"
                        :key="index"
                        :label="item">
                    </i-radio>
                </i-radio-group>
            </i-form-item>
                <i-form-item label="背景颜色：">
                    <color-input :color-value.sync="bgColor">
                    </color-input>
                </i-form-item>
            </section>
            <i-form-item>
                <url-input
                    :modules-index="modulesIndex"
                    :list-index="0"
                    hideClose>
                </url-input>
            </i-form-item>
        </i-form>
    </div>
</template>

<script>
// utils
import Util from '@/utils/util'

// mapActions
import { mapActions } from 'vuex'

// mixins update attr
import UpdateAttr from '@/admin/mixins/update-attr'

// localData
import localData from './data/local'

// viusal component element
import { ColorInput, EditImg, UrlInput } from '@/admin/components'

export default {
    name: 'b-title',
    props: ['setting', 'onlineData', 'modulesIndex'],
    mixins: [UpdateAttr],
    data() {
        return {
            addTitle: '添加一个文本导航'
        }
    },
    components: {
        ColorInput,
        EditImg,
        UrlInput
    },
    methods: {
        ...mapActions('viusal', ['updateDataAttr']),
        /**
         * 副标题时间文本切换
         */
        tabFitTitle() {
            this.bDate ? (this.bDate = 0) : (this.bDate = 1)
        }
    },
    computed: {
        /**
         * 标题
         */
        title: {
            get() {
                return this.data.allValue.title
            },
            set(value) {
                this._updateDataAttr({
                    attrName: 'title',
                    value
                })
            }
        },
        /**
         * 标题
         */
        fitTitle: {
            get() {
                return this.data.allValue.fitTitle
            },
            set(value) {
                this._updateDataAttr({
                    attrName: 'fitTitle',
                    value
                })
            }
        },
        /**
         * 日期时间
         */
        dateTime: {
            get() {
                return this.data.allValue.dateTime
            },
            set(value) {
                this._updateDataAttr({
                    attrName: 'dateTime',
                    value: Util.formatDate(value)
                })
            }
        },
        /**
         * 作者
         */
        author: {
            get() {
                return this.data.allValue.author
            },
            set(value) {
                this._updateDataAttr({
                    attrName: 'author',
                    value
                })
            }
        },
        /**
         * 背景颜色
         */
        bgColor: {
            get() {
                return this.data.allValue.bgColor
            },
            set(value) {
                this._updateDataAttr({
                    attrName: 'bgColor',
                    value
                })
            }
        },
        /**
         * 是否是时间
         */
        bDate: {
            get() {
                return this.data.bDate
            },
            set(value) {
                this._updateDataAttr({
                    belong: 'data',
                    attrName: 'bDate',
                    value
                })
            }
        },
        /**
         * 模板值
         */
        styleValue: {
            get() {
                return this.data.styleValue
            },
            set(value) {
                this._updateDataAttr({
                    belong: 'data',
                    attrName: 'styleValue',
                    value
                })
            }
        },
        /**
         * 显示值
         */
        positionValue: {
            get() {
                return this.data.positionValue
            },
            set(value) {
                this._updateDataAttr({
                    belong: 'data',
                    attrName: 'positionValue',
                    value
                })
            }
        },
        data() {
            return Object.assign({}, localData.data, this.onlineData)
        }
    }
}
</script>

<style lang="less" scoped>

</style>